<script lang="ts" setup>
import { removeSite, type Site, updateSite } from '@/api/SiteApi.ts'
import GeneralModal from '@/component/General/Modal/GeneralModal.vue'
import SelectSiteGroup from '@/component/Selector/SelectSiteGroup/SelectSiteGroup.vue'
import SiteFormModal from '@/component/SiteFormModal/SiteFormModal.vue'
import ShowResources from '@/component/Upload/ShowResources.vue'
import { ObjectTool } from '@es-tool/core'
import { nextTick, ref } from 'vue'


const props = defineProps<{
    site: Site,
    groupId: string
}>()

const emits = defineEmits<{
    (event: 'change', value: Array<string>): void
}>()

const showUpdateForm = ref(false)
const siteFormModelRef = ref<InstanceType<typeof SiteFormModal> | null>(null)

const showSelectGroupModal = ref(false)
const selectedGroupId = ref('')
const selectSiteGroupModalRef = ref<InstanceType<typeof GeneralModal> | null>(null)
const onSelectGroup = async () => {
    try {
        const groupId = selectedGroupId.value
        if (!groupId) {
            return false
        }

        const copy = ObjectTool.copy(props.site)
        await updateSite({ ...copy, groupId: groupId })
        emits('change', [ props.groupId, groupId ])
    } catch (e) {
        console.debug(e)
        return false
    }
}

const onSelect = (value: string) => {
    switch (value) {
        case '修改': {
            showUpdateForm.value = true
            nextTick(() => siteFormModelRef.value?.show())
            break
        }
        case '移动': {
            showSelectGroupModal.value = true
            nextTick(() => selectSiteGroupModalRef.value?.show())
            break
        }
        case '删除': {
            removeSite(props.site.id!)
                    .then(() => emits('change', [ props.groupId ]))
            break
        }
    }
}

</script>

<template>
<a-dropdown
        alignPoint
        trigger="contextMenu"
        @select="onSelect"
>
    <section class="site-item">
        <a :href="site.url" target="_blank">
            <ShowResources v-if="site.icon" :uri="site.icon">
                <template #default="{url}">
                    <a-image
                            :height="120"
                            :preview="false"
                            :src="url"
                            :width="120"
                            fit="cover"
                            referrerpolicy="no-referrer"
                    />
                </template>
            </ShowResources>
            <a-avatar v-else :size="120" shape="square">
                {{ site.name }}
            </a-avatar>
        </a>
        <div class="name">{{ site.name }}</div>
    </section>

    <template #content>
        <a-doption value="修改">
            <template #icon>
                <icon-edit />
            </template>
            <span>修改</span>
        </a-doption>
        <a-doption value="移动">
            <template #icon>
                <icon-drag-arrow />
            </template>
            移动
        </a-doption>
        <a-doption value="删除">
            <template #icon>
                <icon-delete />
            </template>
            删除
        </a-doption>
    </template>
</a-dropdown>

<teleport v-if="showUpdateForm" to="body">
    <SiteFormModal
            ref="siteFormModelRef"
            :data-site-id="site.id"
            :group-id="groupId"
            :site="site"
            @change="() => emits('change', [groupId])"
    >
        <template #trigger>
            <span />
        </template>
    </SiteFormModal>
</teleport>

<teleport v-if="showSelectGroupModal" to="body">
    <GeneralModal
            ref="selectSiteGroupModalRef"
            :on-before-ok="onSelectGroup"
            title="选择目标分组"
    >
        <SelectSiteGroup v-model="selectedGroupId" />
    </GeneralModal>
</teleport>

</template>

<style lang="scss" scoped>

</style>
